<template>
  <div class="container">
    <div class="userinfo">
      <a href="" v-if="userInfo.avatarUrl">
          <img class="userinfo-avatar" :src="userInfo.avatarUrl" background-size="cover"/>
      </a>
      <button v-else open-type='getUserInfo' class="loginBut">登录云消息</button>
    </div>

    <div class="cad">
      <div class="qingxiecls">我的账单</div>
      <div class="qingxiecls">我的手机</div>
    </div>
  </div>
</template>
<script>
import { requestPost } from '@/utils/index'
export default {
  data () {
    return {
      userInfo: {},
      code: '',
      jtq: '',
      enen: 0
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: ''
    })
    this.showuserinfo()
  },
  onUnload () {
    clearInterval(this.jtq)
  },
  methods: {
    showuserinfo () {
      var that = this
      this.jtq = setInterval(function () {
        if (this.enen === 1) {
          return
        }
        wx.getUserInfo({
          success: (res) => {
            that.userInfo = res.userInfo
            wx.setStorageSync('headimg', that.userInfo.avatarUrl)
            wx.setStorageSync('city', that.userInfo.city)
            this.enen = 1
          }
        })
      }, 1000)
    },
    getUserInfo () {
      var that = this
      wx.login({
        success: (res) => {
          that.code = res.code
          that.getOpenid()
        }
      })
    },
    saveUserInfo () {
      var data = {
        'avatarurl': this.userInfo.avatarUrl,
        'city': this.userInfo.city,
        'country': this.userInfo.country,
        'gender': this.userInfo.gender,
        'language': this.userInfo.language,
        'nickname': this.userInfo.nickName,
        'province': this.userInfo.province,
        'openid': wx.getStorageSync('openid')
      }
      var url = wx.getStorageSync('requestUrl') + '/harduser/xcxlogin'
      requestPost(url, data, 'POST').then(function (value) {
        wx.redirectTo({
          url: '/pages/counter/main'
        })
        console.log('登录成功')
      }, function (value) {
        console.log('登录错误')
      })
    },
    getOpenid () {
      var data = {
        'obj': {'js_code': this.code}
      }
      var url = wx.getStorageSync('requestUrl') + '/api/wxGetOpenid'
      requestPost(url, data, 'POST').then(function (value) {
        wx.setStorageSync('openid', value.openid)
        // console.log('openid success' + wx.getStorageSync('openid'))
      }, function (value) {
        console.log('获取错误')
      })
    },
    gopage () {
      this.saveUserInfo()
    }
  }
}
</script>
<style>
html,body,#app {
  background-color: #eee;
}
.userinfo {
  width: 100%;
  margin: 30px;
  text-align: center;
}
.cad{
  width: 100%;
}
.userinfo-avatar {
  width: 128rpx;
  height: 128rpx;
  border-radius: 50%;
}
.container{
  background-size: contain;
  width: 100%;
}
.loginBut{
  width: 100%;
}
.qingxiecls{
  width: 80%;
  height: 50px;
  line-height: 50px;
  font-size: 20px;
  margin-left: 10%;
  margin-bottom: 1px;
  background-color: rgba(255, 255, 255, 0.692);
  /* border-radius: 10px 10px 10px 10px; */
  border-bottom: 0px solid #ccc;
  text-align: center;

}
</style>
